<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>Sass使用指南 | Aurthur Article</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="使用 Sass (Using Sass)Sass 有三种使用方式：作为命令行工具，作为独立的 Ruby 模块 (Ruby module)，或者作为 Rack-enabled 框架的插件，包括 Ruby on Rails 与 Merb。
无论使用哪种方式都需要首先安装 Sass gem :
1gem install sass
如果你使用的是 Windows ，你可能首先需要安装 Ruby
如果要在命">
<meta property="og:type" content="article">
<meta property="og:title" content="Sass使用指南">
<meta property="og:url" content="http://aurthur.gitos.cn/Aurthur-2016/sass-tutorial.html">
<meta property="og:site_name" content="Aurthur Article">
<meta property="og:description" content="使用 Sass (Using Sass)Sass 有三种使用方式：作为命令行工具，作为独立的 Ruby 模块 (Ruby module)，或者作为 Rack-enabled 框架的插件，包括 Ruby on Rails 与 Merb。
无论使用哪种方式都需要首先安装 Sass gem :
1gem install sass
如果你使用的是 Windows ，你可能首先需要安装 Ruby
如果要在命">
<meta property="og:updated_time" content="2017-01-07T12:46:31.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Sass使用指南">
<meta name="twitter:description" content="使用 Sass (Using Sass)Sass 有三种使用方式：作为命令行工具，作为独立的 Ruby 模块 (Ruby module)，或者作为 Rack-enabled 框架的插件，包括 Ruby on Rails 与 Merb。
无论使用哪种方式都需要首先安装 Sass gem :
1gem install sass
如果你使用的是 Windows ，你可能首先需要安装 Ruby
如果要在命">
  
  
    <link rel="icon" href="/uploads/blog.ico">
  
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>
  <div id="container">
    <div class="left-col">
    <div class="overlay"></div>
<div class="intrude-less">
	<header id="header" class="inner">
		<a href="/" class="profilepic">
			
			<img lazy-src="/uploads/blog.png" class="js-avatar">
			
		</a>

		<hgroup>
		  <h1 class="header-author"><a href="/">Aurthur</a></h1>
		</hgroup>

		
		<p class="header-subtitle">Aurthur Blog</p>
		

		
			<div class="switch-btn">
				<div class="icon">
					<div class="icon-ctn">
						<div class="icon-wrap icon-house" data-idx="0">
							<div class="birdhouse"></div>
							<div class="birdhouse_holes"></div>
						</div>
						<div class="icon-wrap icon-ribbon hide" data-idx="1">
							<div class="ribbon"></div>
						</div>
						
						
						<div class="icon-wrap icon-me hide" data-idx="3">
							<div class="user"></div>
							<div class="shoulder"></div>
						</div>
						
					</div>
					
				</div>
				<div class="tips-box hide">
					<div class="tips-arrow"></div>
					<ul class="tips-inner">
						<li>菜单</li>
						<li>标签</li>
						
						
						<li>关于我</li>
						
					</ul>
				</div>
			</div>
		

		<div class="switch-area">
			<div class="switch-wrap">
				<section class="switch-part switch-part1">
					<nav class="header-menu">
						<ul>
						
							<li><a href="/">主页</a></li>
				        
							<li><a href="/archives">所有文章</a></li>
				        
						</ul>
					</nav>
					<nav class="header-nav">
						<div class="social">
							
								<a class="github" target="_blank" href="https://github.com/aurthurxlc" title="github">github</a>
					        
								<a class="zhihu" target="_blank" href="https://www.zhihu.com/people/aurthur" title="zhihu">zhihu</a>
					        
								<a class="mail" target="_blank" href="/aurthurxlc@gmail.com" title="mail">mail</a>
					        
								<a class="google" target="_blank" href="https://plus.google.com/u/0/110645540964195673210" title="google">google</a>
					        
						</div>
					</nav>
				</section>
				
				
				<section class="switch-part switch-part2">
					<div class="widget tagcloud" id="js-tagcloud">
						<a href="/tags/ADB/" style="font-size: 10px;">ADB</a> <a href="/tags/API/" style="font-size: 10px;">API</a> <a href="/tags/Android/" style="font-size: 10px;">Android</a> <a href="/tags/Apache/" style="font-size: 12.5px;">Apache</a> <a href="/tags/CentOS/" style="font-size: 15px;">CentOS</a> <a href="/tags/Centos/" style="font-size: 12.5px;">Centos</a> <a href="/tags/Chkconfig/" style="font-size: 10px;">Chkconfig</a> <a href="/tags/Electron/" style="font-size: 10px;">Electron</a> <a href="/tags/FTP/" style="font-size: 10px;">FTP</a> <a href="/tags/FastCGI/" style="font-size: 10px;">FastCGI</a> <a href="/tags/Iterm/" style="font-size: 10px;">Iterm</a> <a href="/tags/Java/" style="font-size: 15px;">Java</a> <a href="/tags/Kernel/" style="font-size: 10px;">Kernel</a> <a href="/tags/Linux/" style="font-size: 17.5px;">Linux</a> <a href="/tags/Mac/" style="font-size: 12.5px;">Mac</a> <a href="/tags/Mirror/" style="font-size: 10px;">Mirror</a> <a href="/tags/Mysql/" style="font-size: 12.5px;">Mysql</a> <a href="/tags/Nginx/" style="font-size: 12.5px;">Nginx</a> <a href="/tags/PHP/" style="font-size: 20px;">PHP</a> <a href="/tags/RESTful/" style="font-size: 10px;">RESTful</a> <a href="/tags/Regular-Expression/" style="font-size: 10px;">Regular Expression</a> <a href="/tags/SSH/" style="font-size: 10px;">SSH</a> <a href="/tags/SSL/" style="font-size: 10px;">SSL</a> <a href="/tags/Sass/" style="font-size: 10px;">Sass</a> <a href="/tags/Server/" style="font-size: 10px;">Server</a> <a href="/tags/Terminal/" style="font-size: 10px;">Terminal</a> <a href="/tags/Ubuntu/" style="font-size: 10px;">Ubuntu</a> <a href="/tags/VPN/" style="font-size: 10px;">VPN</a> <a href="/tags/Vagrant/" style="font-size: 10px;">Vagrant</a> <a href="/tags/Volume/" style="font-size: 12.5px;">Volume</a> <a href="/tags/Web/" style="font-size: 12.5px;">Web</a> <a href="/tags/Windows/" style="font-size: 10px;">Windows</a> <a href="/tags/compile/" style="font-size: 10px;">compile</a> <a href="/tags/dd/" style="font-size: 10px;">dd</a> <a href="/tags/develop-tools/" style="font-size: 10px;">develop tools</a> <a href="/tags/gitlab/" style="font-size: 10px;">gitlab</a> <a href="/tags/go/" style="font-size: 12.5px;">go</a> <a href="/tags/gzip/" style="font-size: 10px;">gzip</a> <a href="/tags/hook/" style="font-size: 10px;">hook</a> <a href="/tags/java/" style="font-size: 10px;">java</a> <a href="/tags/mod-php/" style="font-size: 10px;">mod_php</a> <a href="/tags/ntp/" style="font-size: 10px;">ntp</a> <a href="/tags/supervisor/" style="font-size: 10px;">supervisor</a> <a href="/tags/web/" style="font-size: 10px;">web</a> <a href="/tags/zimg/" style="font-size: 12.5px;">zimg</a>
					</div>
				</section>
				
				
				

				
				
				<section class="switch-part switch-part3">
				
					<div id="js-aboutme">true</div>
				</section>
				
			</div>
		</div>
	</header>				
</div>
    </div>
    <div class="mid-col">
      <nav id="mobile-nav">
  	<div class="overlay">
  		<div class="slider-trigger"></div>
  		<h1 class="header-author js-mobile-header hide">Aurthur</h1>
  	</div>
	<div class="intrude-less">
		<header id="header" class="inner">
			<div class="profilepic">
				<img lazy-src="/uploads/blog.png" class="js-avatar">
			</div>
			<hgroup>
			  <h1 class="header-author">Aurthur</h1>
			</hgroup>
			
			<p class="header-subtitle">Aurthur Blog</p>
			
			<nav class="header-menu">
				<ul>
				
					<li><a href="/">主页</a></li>
		        
					<li><a href="/archives">所有文章</a></li>
		        
		        <div class="clearfix"></div>
				</ul>
			</nav>
			<nav class="header-nav">
				<div class="social">
					
						<a class="github" target="_blank" href="https://github.com/aurthurxlc" title="github">github</a>
			        
						<a class="zhihu" target="_blank" href="https://www.zhihu.com/people/aurthur" title="zhihu">zhihu</a>
			        
						<a class="mail" target="_blank" href="/aurthurxlc@gmail.com" title="mail">mail</a>
			        
						<a class="google" target="_blank" href="https://plus.google.com/u/0/110645540964195673210" title="google">google</a>
			        
				</div>
			</nav>
		</header>				
	</div>
</nav>
      <div class="body-wrap"><article id="post-sass-tutorial" class="article article-type-post" itemscope itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/Aurthur-2016/sass-tutorial.html" class="article-date">
  	<time datetime="2017-01-07T12:46:31.000Z" itemprop="datePublished">2017-01-07</time>
</a>
    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy" />
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      Sass使用指南
    </h1>
  

      </header>
      
      <div class="article-info article-info-post">
        
	<div class="article-tag tagcloud">
		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Sass/">Sass</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/web/">web</a></li></ul>
	</div>

        
	<div class="article-category tagcloud">
	<a class="article-category-link" href="/categories/Technical/">Technical</a>
	</div>


        <div class="clearfix"></div>
      </div>
      
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="使用_Sass_(Using_Sass)">使用 Sass (Using Sass)</h2><p>Sass 有三种使用方式：作为命令行工具，作为独立的 Ruby 模块 (Ruby module)，或者作为 Rack-enabled 框架的插件，包括 Ruby on Rails 与 Merb。</p>
<p>无论使用哪种方式都需要首先安装 Sass gem :</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">gem install sass</span><br></pre></td></tr></table></figure>
<p>如果你使用的是 Windows ，你可能首先需要安装 Ruby</p>
<p>如果要在命令行中运行 Sass ,只要使用</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sass input.scss output.css</span><br></pre></td></tr></table></figure>
<p>你还可以使用 Sass 命令来监视某个 Sass 文件的改动，并自动编译来更新 CSS :</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sass --watch input.scss:output.css</span><br></pre></td></tr></table></figure>
<a id="more"></a>
<p>如果你的目录里有很多 Sass 文件，你也可以使用 Sass 命令来监视整个目录 :</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sass --watch app/sass:public/stylesheets</span><br></pre></td></tr></table></figure>
<p>SASS提供四个编译风格的选项:</p>
<blockquote>
<p>nested：嵌套缩进的 css 代码，它是默认值。</p>
<p>expanded：没有缩进的、扩展的 css 代码。</p>
<p>compact：简洁格式的 css 代码。</p>
<p>compressed：压缩后的 css 代码。</p>
</blockquote>
<p>生产环境当中，一般使用最后一个选项:</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sass --style compressed test.sass test.css</span><br></pre></td></tr></table></figure>
<p>使用 sass –help 可以列出完整的帮助文档</p>
<h2 id="基本用法">基本用法</h2><h4 id="1_变量">1 变量</h4><blockquote>
<p>SASS 允许使用变量，所有变量以 $ 开头</p>
</blockquote>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">　　$blue : #1875e7;　</span><br><span class="line">　　div &#123;</span><br><span class="line">　　　color : $blue;</span><br><span class="line">　　&#125;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>如果变量需要镶嵌在字符串之中，就必须需要写在 #{} 之中</p>
</blockquote>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">　　$side : left;</span><br><span class="line">　　.rounded &#123;</span><br><span class="line">　　　　border-#&#123;$side&#125;-radius: 5px;</span><br><span class="line">　　&#125;</span><br></pre></td></tr></table></figure>
<h4 id="2_计算功能">2 计算功能</h4><blockquote>
<p>SASS 允许在代码中使用算式</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">　　<span class="selector-tag">body</span> &#123;</span><br><span class="line">　　　　<span class="attribute">margin</span>: (<span class="number">14px</span>/<span class="number">2</span>);</span><br><span class="line">　　　　<span class="attribute">top</span>: <span class="number">50px</span> + <span class="number">100px</span>;</span><br><span class="line">　　　　<span class="attribute">right</span>: $var * <span class="number">10%</span>;</span><br><span class="line">　　&#125;</span><br></pre></td></tr></table></figure>
<h4 id="3_嵌套">3 嵌套</h4><blockquote>
<p>SASS 允许选择器嵌套。比如，下面的 CSS 代码：</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">　　<span class="selector-tag">div</span> <span class="selector-tag">h1</span> &#123;</span><br><span class="line">　　　　<span class="attribute">color </span>: red;</span><br><span class="line">　　&#125;</span><br></pre></td></tr></table></figure>
<p>可以写成：</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">　　div &#123;</span><br><span class="line">　　　　hi &#123;</span><br><span class="line">　　　　　　color:red;</span><br><span class="line">　　　　&#125;</span><br><span class="line">　　&#125;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>属性也可以嵌套，比如 border-color 属性，可以写成：</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">　<span class="selector-tag">p</span> &#123;</span><br><span class="line">　　　　<span class="attribute">border</span>: &#123;</span><br><span class="line">　　　　　　color: red;</span><br><span class="line">　　　　&#125;</span><br><span class="line">　　&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>注意，border 后面必须加上冒号。</li>
</ul>
<blockquote>
<p>在嵌套的代码块内，可以使用 &amp; 引用父元素。比如 a:hover 伪类，可以写成：</p>
</blockquote>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">　　a &#123;</span><br><span class="line">　　　　&amp;:hover &#123; color: #ffb3ff; &#125;</span><br><span class="line">　　&#125;</span><br></pre></td></tr></table></figure>
<h4 id="4_注释">4 注释</h4><blockquote>
<p>SASS 共有两种注释风格</p>
</blockquote>
<ul>
<li>标准的CSS注释 /<em> comment </em>/ ，会保留到编译后的文件。</li>
<li>单行注释 // comment，只保留在SASS源文件中，编译后被省略。</li>
<li>在/*后面加一个感叹号，表示这是”重要注释”。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">　　/*!</span><br><span class="line">　　　　重要注释！</span><br><span class="line">　　*/</span><br></pre></td></tr></table></figure>
<h2 id="代码的重用">代码的重用</h2><h4 id="1_继承">1 继承</h4><p>SASS 允许一个选择器，继承另一个选择器。比如，现有 class1：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">　　<span class="selector-class">.class1</span> &#123;</span><br><span class="line">　　　　<span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#ddd</span>;</span><br><span class="line">　　&#125;</span><br></pre></td></tr></table></figure>
<p>class2 要继承 class1，就要使用 @extend 命令：</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">　　.class2 &#123;</span><br><span class="line">　　　　@extend .class1;</span><br><span class="line">　　　　font-size:120%;</span><br><span class="line">　　&#125;</span><br></pre></td></tr></table></figure>
<h4 id="2_Mixin">2 Mixin</h4><p>Mixin 有点像 C 语言的宏（macro），是可以重用的代码块。</p>
<blockquote>
<p>使用@mixin命令，定义一个代码块。</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">　　@<span class="keyword">mixin</span> left &#123;</span><br><span class="line">　　　　<span class="selector-tag">float</span>: <span class="selector-tag">left</span>;</span><br><span class="line">　　　　<span class="selector-tag">margin-left</span>: 10<span class="selector-tag">px</span>;</span><br><span class="line">　　&#125;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>使用 @include 命令，调用这个 mixin。</p>
</blockquote>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">　  div &#123;</span><br><span class="line">　　　　@include left;</span><br><span class="line">　　&#125;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>mixin 的强大之处，在于可以指定参数和缺省值。</p>
</blockquote>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">　　@mixin left($value: 10px) &#123;</span><br><span class="line">　　　　float: left;</span><br><span class="line">　　　　margin-right: $value;</span><br><span class="line">　　&#125;</span><br></pre></td></tr></table></figure>
<p>使用的时候，根据需要加入参数：</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">　　div &#123;</span><br><span class="line">　　　　@include left(20px);</span><br><span class="line">　　&#125;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>下面是一个 mixin 的实例，用来生成浏览器前缀。</p>
</blockquote>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">　　@mixin rounded($vert, $horz, $radius: 10px) &#123;</span><br><span class="line">　　　　border-#&#123;$vert&#125;-#&#123;$horz&#125;-radius: $radius;</span><br><span class="line">　　　　-moz-border-radius-#&#123;$vert&#125;#&#123;$horz&#125;: $radius;</span><br><span class="line">　　　　-webkit-border-#&#123;$vert&#125;-#&#123;$horz&#125;-radius: $radius;</span><br><span class="line">　　&#125;</span><br></pre></td></tr></table></figure>
<p>使用的时候，可以像下面这样调用：</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">　　#navbar li &#123; @include rounded(top, left); &#125;</span><br><span class="line">　　#footer &#123; @include rounded(top, left, 5px); &#125;</span><br></pre></td></tr></table></figure>
<h4 id="3_颜色函数">3 颜色函数</h4><p>SASS 提供了一些内置的颜色函数，以便生成系列颜色。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">　　lighten(#cc3, 10%) // #d6d65c</span><br><span class="line">　　darken(#cc3, 10%) // #a3a329</span><br><span class="line">　　grayscale(#cc3) // #808080</span><br><span class="line">　　complement(#cc3) // #33c</span><br></pre></td></tr></table></figure>
<h4 id="4_插入文件">4 插入文件</h4><blockquote>
<p>@import 命令，用来插入外部文件。</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">　　@<span class="keyword">import</span> <span class="string">"path/filename.scss"</span>;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>如果插入的是 .css 文件，则等同于 css 的 import 命令。</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">　　@<span class="keyword">import</span> <span class="string">"foo.css"</span>;</span><br></pre></td></tr></table></figure>
<h2 id="高级用法">高级用法</h2><h4 id="1_条件语句">1 条件语句</h4><p>@if 可以用来判断：</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">　　p &#123;</span><br><span class="line">　　　　@if 1 + 1 == 2 &#123; border: 1px solid; &#125;</span><br><span class="line">　　　　@if 5 &lt; 3 &#123; border: 2px dotted; &#125;</span><br><span class="line">　　&#125;</span><br></pre></td></tr></table></figure>
<p>配套的还有 @else 命令：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">　　@<span class="keyword">if</span> lightness($color) &gt; <span class="number">30%</span> &#123;</span><br><span class="line">　　　　<span class="selector-tag">background-color</span>: <span class="selector-id">#000</span>;</span><br><span class="line">　　&#125; @<span class="keyword">else</span> &#123;</span><br><span class="line">　　　　<span class="selector-tag">background-color</span>: <span class="selector-id">#fff</span>;</span><br><span class="line">　　&#125;</span><br></pre></td></tr></table></figure>
<h4 id="2_循环语句">2 循环语句</h4><blockquote>
<p>SASS支持for循环：</p>
</blockquote>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">　　@for $i from 1 to 10 &#123;</span><br><span class="line">　　　　.border-#&#123;$i&#125; &#123;</span><br><span class="line">　　　　　　border: #&#123;$i&#125;px solid blue;</span><br><span class="line">　　　　&#125;</span><br><span class="line">　　&#125;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>也支持 while 循环：</p>
</blockquote>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">　　$i: 6;</span><br><span class="line">　　@while $i &gt; 0 &#123;</span><br><span class="line">　　　　.item-#&#123;$i&#125; &#123; width: 2em * $i; &#125;</span><br><span class="line">　　　　$i: $i - 2;</span><br><span class="line">　　&#125;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>each 命令，作用与 for 类似：</p>
</blockquote>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">　　@each $member in a, b, c, d &#123;</span><br><span class="line">　　　　.#&#123;$member&#125; &#123;</span><br><span class="line">　　　　　　background-image: url("/image/#&#123;$member&#125;.jpg");</span><br><span class="line">　　　　&#125;</span><br><span class="line">　　&#125;</span><br></pre></td></tr></table></figure>
<h4 id="3_自定义函数">3 自定义函数</h4><p>SASS 允许用户编写自己的函数。</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">　　@<span class="keyword">function</span> double($n) &#123;</span><br><span class="line">　　　　@<span class="keyword">return</span> $n * <span class="number">2</span>;</span><br><span class="line">　　&#125;</span><br><span class="line">　　<span class="selector-id">#sidebar</span> &#123;</span><br><span class="line">　　　　<span class="attribute">width</span>: <span class="built_in">double</span>(5px);</span><br><span class="line">　　&#125;</span><br></pre></td></tr></table></figure>

      
    </div>
    
  </div>
  
    
<nav id="article-nav">
  
    <a href="/Aurthur-2016/free-for-dev.html" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption"><</strong>
      <div class="article-nav-title">
        
          开发者免费资源集合
        
      </div>
    </a>
  
  
    <a href="/Aurthur-2016/gitlab-ce-backup-method.html" id="article-nav-older" class="article-nav-link-wrap">
      <div class="article-nav-title">Gitlab CE 备份方法</div>
      <strong class="article-nav-caption">></strong>
    </a>
  
</nav>

  
</article>






</div>
      <footer id="footer">
  <div class="outer">
    <div id="footer-info">
    	<div class="footer-left">
    		&copy; 2017 Aurthur
    	</div>
      	<div class="footer-right">
      		<a href="http://hexo.io/" target="_blank">Hexo</a>  Theme <a href="https://github.com/litten/hexo-theme-yilia" target="_blank">Yilia</a> by Litten
      	</div>
    </div>
  </div>
</footer>
    </div>
    
  <link rel="stylesheet" href="/fancybox/jquery.fancybox.css">


<script>
	var yiliaConfig = {
		fancybox: true,
		mathjax: true,
		animate: true,
		isHome: false,
		isPost: true,
		isArchive: false,
		isTag: false,
		isCategory: false,
		open_in_new: false
	}
</script>
<script src="/js/jquery-1.9.1.min.js"></script>
<script src="/js/main.js"></script>






<script type="text/x-mathjax-config">
MathJax.Hub.Config({
    tex2jax: {
        inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
        processEscapes: true,
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
    }
});

MathJax.Hub.Queue(function() {
    var all = MathJax.Hub.getAllJax(), i;
    for(i=0; i < all.length; i += 1) {
        all[i].SourceElement().parentNode.className += ' has-jax';                 
    }       
});
</script>

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>


  </div>
</body>
</html>